import React from 'react';
import ReactDom from 'react-dom';
import PropTypes from 'prop-types';
import ContentChild from './contentChild';
import ReactMixin from 'react-mixin';
import MixinLog from './mixins';
import {Input} from "antd";

export default class ComponentContent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      age :  30,
    };
  }

  childValueChange(event) {
    this.setState({
      age : event.target.value
    });
  }

  componentWillMount() {
    console.log('componentWillMount');
  }


  componentDidMount() {
    console.log('componentDidMount');
  }

  changeUserInfo() {
    this.setState(
        { username : 'gaoxiaobobo',
                age : 60
        }
    );
    // 第一种方式
    // var button = document.getElementById('summitButton');
    // ReactDom.findDOMNode(button).style.color = 'green';

    // 第一种方式: refs
    this.refs.summitButton.style.color = 'red';

    MixinLog.log();
  }

  changeUserInfoWithParam(age) {
    this.setState(
        {
            age : age
        }
    );
  }

  render() {

    // setTimeout(()=>{
    //   this.setState(
    //       {username: "gaoxiaobo",
    //              age : 40
    //             }
    //       )
    // }, 5000);

    return (
      <div>
            <h2>这是内容</h2>
            <p>这是props username : {this.props.username}  userid: {this.props.userid} </p>
            <p>这是statu age:{this.state.age}</p>
            <input id = "summitButton" ref = "summitButton" type="button" value="提交" onClick={this.changeUserInfo.bind(this)}/>
            <input type="button" value="提交" onClick={this.changeUserInfoWithParam.bind(this, 99)}/>
            <ContentChild {...this.props} avater = {'avater'} childValueChange = {this.childValueChange.bind(this)}/>

            <Input/>
      </div>
    )
  }
}


ComponentContent.propsTypes = {
    userid : PropTypes.any.isRequired
};

ComponentContent.defaultProps = {
    username : 'Mary',
    userid : 9999
};

ReactMixin(ComponentContent.prototype, MixinLog);